<template>
    <div class="table-paging-content" ref="pagingContent">
        <el-table border :align="'center'" ref="multipleTable"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" :default-expand-all="tableItem.expandAll"
            :row-key="tableItem.tree ? 'id' : ''" :data="tableItem.tableData.data || []" tooltip-effect="dark"
            @selection-change="tableItem.selectChange" style="width:100%; height: calc(100% - 72px);"
            :style="!tableItem.pageInfo.pagesClose || slots.footerCustom ? { height: 'calc(100% - 72px)' } : { height: 'calc(100% - 20px)' }"
            :scrollbar-always-on="true" @sort-change='sortChange' :row-class-name="tableItem.tableRowClassName">
            <!-- 多选框 pagesClose分页关闭和打开的的高度不一样-->
            <el-table-column v-if="tableItem.select" type="selection" width="55"> </el-table-column>
            <!-- 顺序 和 多选框不共存-->
            <el-table-column v-if="tableItem.index" type="index" width="55"></el-table-column>

            <el-table-column style="text-align: center;overflow-x: hidden" v-for="(column, index) in tableItem.column "
                :key="index" :fixed="column.fixed || ''" :width="column.width" :min-width="column.minWidth" :label="column.label"
                :class-name="column.treeNode ? 'table-paging-treeNode' : ''" :prop="column.prop"
                :align="column.align || tableItem.align || 'left'" v-show="!column.closeShow"
                :sortable="column.sortable || false" :show-overflow-tooltip="column.tooltip">
                <!-- column.treeNode ? 'treeNode' : ' -->
                <template v-slot:header=header>
                    <span v-if="column.tipContent">
                        <el-tooltip  class="box-item" effect="dark" placement="top">
                            <template #content>
                                <span>{{column.tipContent}}</span>
                            </template>
                            <sapn style="white-space: nowrap;">{{ header.column.label }}</sapn>
                        </el-tooltip>
                    </span>
                    <span v-else style="white-space: nowrap;">{{ header.column.label }}</span>
                </template>
                <template #default="scope">

                    <div v-if="column.htmlContent" v-html="column.htmlContent(scope.row)"></div>
                    <component :is="column.component" :scope="scope.row" :tableItem="tableItem" :param="column.param"
                        v-else-if="column.component" />
                    <div v-else>
                        <span>{{ column.closeShow }}</span>
                        <div :style="column.columnStyle || { 'justify-content': column.align || tableItem.align || '' }"
                            class="flex">
                            <div v-for="(value, key) in scope.row " :key="key">
                                <!-- 头像或图片 -->
                                <img class="margin-l-r-5px img-round-48px" v-if="key == 'imgUrl' && column.img" :src="value"
                                    alt="">
                                <!-- element icon -->
                                <i class="margin-l-r-5px " v-if="key == 'elicon' && column.elIcon" :class="value"></i>
                                <!-- 基础数据展示 -->
                                <span :class="column.clazz || 'margin-l-r-5px'" v-if="key == column.prop">{{ value
                                }}</span>
                                <!-- 标签 -->
                                <span class="margin-l-r-5px labelIcon-primary" :style="column.labelIconStyle || {}"
                                    v-if="key == column.labelIcon && column.labelIcon && scope.row[key]">
                                    {{ value }}
                                </span>
                            </div>
                        </div>
                        <div v-if="column.prop == 'action' && !column.component">
                            <slot name="actionCustom" :scope="scope"></slot>
                            <!-- primary 主要按钮 success 成功按钮   danger危险按钮 text文本  info 信息按钮 warning
                            警告按钮 plain 镂空  round圆角 -->
                            <div v-if="tableItem.btnArray">
                                <div v-for="(button, btKey)  in  tableItem.btnArray " :key="btKey"
                                    style="display:inline-block">
                                    <el-button :style="button.text == false ? '' : { padding: '8px' }" :size="button.size || 'small'"
                                        :key="btKey" :type="button.type"
                                        v-if="(button.showFunction ? button.showFunction(scope.row) : button.show != false) && !(scope.row.closeButton + '').includes(button.label)"
                                        v-hasPermi="button.hasPermi || []" :plain="button.plain == false ? button.plain : true"
                                        :round="button.round || false" :text="button.text == false ? button.text : true"
                                        @click="button.handle(scope.row, button.customParameters) || ''">
                                        {{ button.label }}</el-button>
                                </div>
                            </div>
                            <el-dropdown v-if="tableItem.moreBtnArray && tableItem.moreBtnArray.length > 0">
                                <span class="el-dropdown-link">
                                    {{ tableItem.moreBtnArrayText || '更多' }}
                                    <el-icon class="el-icon--right">
                                        <arrow-down />
                                    </el-icon>
                                </span>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item v-for="moreItem, moreIndex in  tableItem.moreBtnArray"
                                            :key="moreIndex" @click="moreItem.handle">{{ moreItem.text }}</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div>
            <slot name="footerCustom"></slot>
        </div>
        <el-pagination v-if="!tableItem.pageInfo.pagesClose" class="pagination"
            v-model:current-page="tableItem.pageInfo.request.pageDomain.pageNum"
            :page-size="tableItem.pageInfo.request.pageDomain.pageSize" :small="small" :disabled="disabled"
            :page-sizes="[10, 20, 50, 100]" :background="background" layout="total, prev, pager, next,sizes,jumper"
            :total="tableItem.tableData.total || 0" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>
<script setup>
import { reactive, ref, nextTick, onMounted, watch, getCurrentInstance, inject, useSlots } from "vue"
import { useCut } from './cutHook.js'//引入自动hook
import request from '@/utils/request'

let clientHeight = 0
const tableHeight = ref('')
const testTip = ref(true)
const tableMaxHeight = ref('500px')
const tableCellHeight = ref('76px')
const CurrentInstance = getCurrentInstance()
const emit = defineEmits(['clickEmit'])
const slots = useSlots()
// console.log(slots.footerCustom,'slots999')
//使原本选中的行，在重新分页渲染过后，依然保持选中状态
const multipleTable = ref('')
let rows = inject("rows")
watch(() => props.tableItem.signalToSelection, () => {
    nextTick(() => {
        rows.value.forEach((item) => {
            multipleTable.value.toggleRowSelection(props.tableItem.tableData.data[item.index], true)
        })
    })

})
const getResult = (result) => {
    console.log(result, 'result')
}
const clickThis = () => {
    emit('clickEmit', 2)
}
const props = defineProps({
    tableItem: { default: function () { return {} } },
    buttonList: {
        default: function () {
            return []
        }
    },
})
onMounted(() => {
    increment()
})
async function increment() {
    await nextTick()
    // DOM 此时已经更新
    if (CurrentInstance.parent.refs.tablePagingFather) { clientHeight = CurrentInstance.parent.refs.tablePagingFather.clientHeight }
    //动态计算 table-paging-content 的高
    tableHeight.value = '100%' + ' ' + '-' + ' ' + clientHeight + 'px'
    props.tableItem.tree ? tableCellHeight.value = '50px' : ''
}
['levelAdd', 'edit']
const emptyFunction = () => { }
const num1 = ref(2)
const num2 = ref(1)
const { cutNum, cutFunc } = useCut({ num1, num2 })
const currentPage = ref(5)
const small = ref(false)
const disabled = ref(false)
const background = ref(false)
const textAlign = props.tableItem.align
const textDisplay = props.tableItem.tree ? 'flex' : 'block'

const handleSizeChange = (val) => {
    // const emit = defineEmits(['update:tableItem.pageInfo'])
    props.tableItem.pageInfo.request.pageDomain.pageSize = val
    paging()
}
const handleCurrentChange = (val) => {
    props.tableItem.pageInfo.request.pageDomain.pageNum = val
    paging()
}

const sortChange = (column) => {
    let pageDomain = props.tableItem.pageInfo.request.pageDomain
    pageDomain.orderByColumn = column.prop
    if (column.order === 'ascending') {
        pageDomain.isAsc = 'asc'
    }
    if (column.order === 'descending') {
        pageDomain.isAsc = 'desc'
    }
    paging()
}

const paging = ()=>{
  let pageInfo = props.tableItem.pageInfo
  if (pageInfo.paging) {
    pageInfo.paging()
    return
  }
}
</script>

<style lang="scss" >
.is-horizontal {
    .el-scrollbar__thumb {
        height: 0 !important;
    }
}

.el-table .warning-row {
    color: #F56C6C;
}

.el-table {
    .el-table__cell {
        height: v-bind(tableCellHeight);
        padding: 0;
        text-align: center;
    }
}

.table-paging-content {
    span {
        white-space: nowrap;
    }

    .margin-l-r-5px-warp {
        white-space: pre-wrap;
    }

    padding: 0 20px;
    height: calc(v-bind(tableHeight));
    position: relative;

    .pagination {
        float: right;
        margin-top: 20px;

        .el-input {
            height: 26px;
        }
    }

}

.table-paging-treeNode {
    .cell {
        display: flex;
        align-items: center
    }

}

@import url(./elementTable.css);
</style>
